﻿<%@ Page Title="" Language="C#" MasterPageFile="~/_Default.Master" AutoEventWireup="true" CodeBehind="Profile.aspx.cs" Inherits="WebApplication.Setting.Profile" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
    <script>
        let typeTagData = [];
        let styleTagData = [];
        let identityTagData = [];

    </script>
    <link href="../Content/Css/setting.css" rel="stylesheet" />
    <script src="../Content/Scripts/setting.js"></script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
    <div class="layui-row" style="width: 1200px;">
        <div class="layui-col-md10 layui-col-md-offset1 layui-col-sm10 layui-col-sm-offset1">
            <%--tab--%>
            <div class="layui-tab layui-tab-brief" lay-filter="tabMenu"></div>
            <%--信息更改--%>
            <div class="layui-panel mt-10">
                <div class="layui-row">
                    <div class="layui-col-md10 layui-col-md-offset1 layui-col-sm10 layui-col-sm-offset1">
                        <div class="router-wrapper">
                            <%--头像--%>
                            <div class="custom-form-item flex-container">
                                <div class="label">
                                    头像
                                </div>
                                <div class="value">
                                    <div style="width: 100px !important">
                                        <label class="image-selector re-select" style="height: 100px;">
                                            <img id="avatar-img" class="img" src="<%=userInfo.AvatarUrl %>" style="" />
                                            <div class="vertical-layout select-tip">
                                                <i class="iconfont icon-jiatupian icon"></i>
                                                <span>上传头像</span>
                                            </div>
                                        </label>
                                    </div>
                                </div>
                            </div>

                            <%--昵称--%>
                            <div class="custom-form-item flex-container">
                                <div class="label">
                                    昵称
                                </div>
                                <div class="value">
                                    <input type="text" name="nikeName" lay-verify="nikeName" autocomplete="off" placeholder="请输入昵称" value="<%=userInfo.NickName %>" maxlength="25" />
                                </div>
                            </div>

                            <%--性别--%>
                            <div class="custom-form-item flex-container">
                                <div class="label">
                                    性别
                                </div>
                                <div class="value">
                                    <input type="radio" name="sex" value="1" title="女" />
                                    <input type="radio" name="sex" value="2" title="男" />
                                    <input type="radio" name="sex" value="3" title="保密" />
                                </div>
                            </div>

                            <script>
                                $(function () {
                                    const sex = <%=userInfo.Sex%>;
                                    $(`[name="sex"][value="${sex}"]`).prop('checked', true);
                                    layui.form.render()
                                })
                            </script>

                            <%--个人简介--%>
                            <div class="custom-form-item flex-container">
                                <div class="label">
                                    个人简介
                                </div>
                                <div class="value">
                                    <input type="text" name="intro" lay-verify="intro" autocomplete="off" placeholder="请填写一句话简介（70个字以内）" value="<%=userInfo.Intro %>" maxlength="70" />
                                </div>
                            </div>

                            <%--QQ--%>
                            <div class="custom-form-item flex-container">
                                <div class="label">
                                    QQ
                                </div>
                                <div class="value">
                                    <input type="text" name="contact" lay-verify="contact" autocomplete="off" placeholder="请填写QQ（非公开，官方联系专用）" value="<%=userInfo.Contact %>" maxlength="50" />
                                </div>
                            </div>

                            <div class="form-action">
                                <button type="button" class="layui-btn layui-btn-danger-2" lay-submit="" lay-filter="submit-btn">
                                    <i class="iconfont icon-edit"></i>
                                    &nbsp;保 存
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script>
        layui.use(['form', 'jquery'], function () {
            var $ = layui.jquery,
                form = layui.form,
                layer = layui.layer;

            // 进行登录操作
            form.on('submit(submit-btn)', function (data) {
                data = data.field;
                if (data.nikeName.length === 0) {
                    layer.msg("昵称不能为空！")
                    return false;
                }
                $.ajax({
                    url:"/User/Handle.aspx",
                    method:"post",
                    data:{
                        action:"UpdateUserInfo",
                        NickName:data.nikeName,
                        Sex:parseInt(data.sex),
                        Intro:data.intro,
                        Contact:data.contact
                    },
                    success:()=>{
                        layer.alert("用户信息修改成功", (index) => {
                            layer.closeAll();
                            location.reload()
                        });
                        
                    }
                })
                return true;
            });
        });
    </script>
</asp:Content>
